<template>
  <div class="container">
  <div class="image-container" >
    <!--放大镜--><div class="image-zoom" v-show="showZoom" :style="zoomStyle"></div>
    <img :src="imageSrc" class="original-image" alt="Original Image" @mousemove="moveLens" @mouseleave="hideLens" />
  </div>
  </div>
</template>

<script>
export default {
  data() {
  return {
    imageSrc: 'https://yanxuan-item.nosdn.127.net/3d76d123061b1ba9bce10cda817f91b2.png',
    showZoom: false,
    zoomStyle: {
      backgroundImage: 'url(https://yanxuan-item.nosdn.127.net/3d76d123061b1ba9bce10cda817f91b2.png)',
      backgroundSize: '300% 300%',
      backgroundRepeat: 'no-repeat',
      position: 'absolute'
    },
    posX: 0,
    posY: 0
  };
},
  methods: {
    moveLens(event) {
  this.posX = event.pageX;
  this.posY = event.pageY;
  this.showZoom = true;
  this.zoomStyle.backgroundPosition = `${-this.posX}px ${-this.posY }px`;
},
    hideLens() {
      this.showZoom = false;
    }
  },
};
</script>

<style>
.image-container {
  position: relative;
  width: 400px;
  height: 400px;
  /* overflow: hidden; */
  cursor: crosshair;
}
.original-image {
  display: block;
  width: 100%;
  height: auto;
}
.image-zoom {
  width: 400px;
  height: 400px;
  border: 2px solid #000;
  position: absolute;
  left: 400px;
  top: 0;
  z-index: 900;
}
</style>